<template>
  <div class="info">
    <el-tabs type="border-card">
      <el-tab-pane label="个人信息">

        <ul class="user-info-list">
          <li>
            <label>用户昵称：</label>
            <span>{{userInfoData.nickName}}</span>
          </li>
          <li>
            <label>性别：</label>
            <span>{{ sexObj[userInfoData.sex] }}</span>
          </li>
          <li>
            <label>年龄：</label>
            <span>{{userInfoData.age}}</span>
          </li>
          <li>
            <label>部门：</label>
            <span>{{userInfoData.orgName}}</span>
          </li>
          <li>
            <label>电话：</label>
            <span>{{userInfoData.phone}}</span>
          </li>
          <li>
            <label>邮箱：</label>
            <span>{{ userInfoData.email }}</span>
          </li>
          <li>
            <label>上次登录IP：</label>
            <span>{{userInfoData.lastLoginIp}}</span>
          </li>
          <li>
            <label>上次登录时间：</label>
            <span>{{ lastLoginTime }}</span>
          </li>

        </ul>

      </el-tab-pane>
      <el-tab-pane label="修改密码">
        <el-form
          class="userinfo"
          size="small"
          :model="passwordForm"
          label-width="95px"
          ref="passwordForm"
        >
          <el-form-item
            label="旧密码："
            prop="oldPassword"
            :rules="[{ required: true, message: '请输入旧密码', trigger: 'blur'}]"
          >
            <el-input type="password" v-model="passwordForm.oldPassword"></el-input>
          </el-form-item>
          <el-form-item
            label="新密码："
            prop="password"
            :rules="[
              { required: true, message: '请输入新密码', trigger: 'blur'},
              {
                min: 6, max: 30,
                message: '密码至少6个字符，最多30个字符'
              }
            ]"
          >
            <el-input type="password" v-model="passwordForm.password"></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码："
            prop="confirm"
            :rules="[{ required: true, message: '请确认新密码', trigger: 'blur'}]"
          >
            <el-input type="password" v-model="passwordForm.confirm"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="pwdLoading" type="primary" @click="handleUpdatePwd">确定</el-button>
            <el-button :loading="pwdLoading"
                       type="default"
                       @click="()=>{ this.$refs.passwordForm.resetFields() }">清空
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { mapFields } from 'vuex-map-fields'
import moment from 'moment'

export default {
  name: 'UserInfo',
  data () {
    return {
      sexObj: {
        0: '女',
        1: '男',
        2: '其他'
      },
      pwdLoading: false,
      passwordForm: {
        oldPassword: '',
        password: '',
        confirm: ''
      }
    }
  },
  computed: {
    ...mapFields('profile/profile', {
      userInfo: 'retrieved'
    }),
    userInfoData () {
      return this.userInfo ? this.userInfo : {}
    },
    lastLoginTime () {
      return moment(this.userInfoData.lastLoginTime).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    ...mapActions('profile/profile', ['loginOut', 'updatePassword']),
    handleUpdatePwd () {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          if (this.passwordForm.password !== this.passwordForm.confirm) {
            this.$message.error('两次输入密码不一致！')
          } else {
            this.pwdLoading = true
            const param = {
              oldPwd: this.passwordForm.oldPassword,
              newPwd: this.passwordForm.password
            }
            this.updatePassword(param).then(res => {
              this.$message({
                type: 'success',
                message: '修改密码成功!'
              })
              this.loginOut().then(() => {
                this.$router.push('/login')
              })
            }, _ => {
              this.$refs.passwordForm.resetFields()
              this.pwdLoading = false
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .info {

    ::v-deep .el-tab-pane {
      height: calc(100vh - 155px);
    }

    .user-info-list {
      width: 600px;
      margin: 0 auto;
      /*box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);*/
      padding: 20px;
      border-radius: 5px;

      li {
        margin-top: 20px;
        letter-spacing: 1px;
        span {
          color: #333;
          margin-left: 10px;
        }
      }

    }

    .userinfo {
      width: 450px;
      margin: 0px auto;
      padding-top: 30px;
    }
  }
</style>
